<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" th:href="@{/plugin/layui/css/layui.css}">
</head>
<body>
添加菜单
<!-- 外层元素必须要有 -->
<div>
    <input type="text" id="tree" lay-filter="tree" class="layui-input" />
</div>
<script th:src="@{/plugin/jquery/jquery.min.js}"></script>
<script th:src="@{/plugin/layui/layui.js}"></script>
<script>
    layui.use(["treeSelect"], function () {
        var treeSelect = layui.treeSelect
        treeSelect.render({
            // 选择器
            elem: '#tree',
            // 数据
            data: '/menu/tree',
            // 异步加载方式：get/post，默认get
            type: 'get',
            // 占位符
            placeholder: '修改默认提示信息',
            // 是否开启搜索功能：true/false，默认false
            search: true,
            // 一些可定制的样式
            style: {
                folder: {
                    enable: true
                },
                line: {
                    enable: true
                }
            },
            // 点击回调
            click: function(d){
                // console.log(d);
                treeSelect.checkNode('tree', d.current.menuId);
            },
            // 加载完成后的回调函数
            success: function (d) {
                // console.log(d);
//                选中节点，根据id筛选
                treeSelect.checkNode('tree', 1);
                console.log($('#tree').val());
//                获取zTree对象，可以调用zTree方法
                var treeObj = treeSelect.zTree('tree');
                // console.log(treeObj);
//                刷新树结构
                treeSelect.refresh('tree');
            }
        });
    });
</script>

</body>
</html>